<ion-header>
  <ion-toolbar class="toolbar-head">
    <ion-buttons slot="start" mode='ios'>
      <ion-back-button text="" defaultHref=""></ion-back-button>
    </ion-buttons>
    <ion-title> Payment Methods</ion-title>
    <label slot="end" style="color: #ffffff; margin-right: 10px;" (click)="save()">{{saveBtn}}</label>
  </ion-toolbar>
</ion-header>
<ion-content>

  <div style="
  width: 100%;
  background: #fff;
  font-size: 1rem;
  padding: 0 5px;margin-bottom: 5px;">Note: We only accept Mastercard now, sorry for the inconvenience</div>
  <ion-item lines='none'>
    <ion-label>Payment Methods</ion-label>
  </ion-item>


  <ion-item lines='none' style="margin-top: 5px;">
    <ion-input type="text" placeholder="Name on Card"  [(ngModel)]="backCard.cardUserName"></ion-input>
  </ion-item>
  <ion-item lines='none'>
    <ion-input type="number" placeholder="Card Number" [(ngModel)]="backCard.cardNo"></ion-input>
  </ion-item>

  <ion-item lines='none'>Expires</ion-item>
  <ion-item lines='none'>
   <div style="display: flex;width: 8rem;">
    <ion-input  type='number' placeholder="MM"   [(ngModel)]="backCard.MM"></ion-input>
    <ion-input type='number' placeholder="YY" [(ngModel)]="backCard.YY"></ion-input>
   </div>
   <!-- <ion-input type='text' placeholder="YY" [(ngModel)]="backCard.endDateTime"></ion-input> -->
    <ion-input style="border-left: 1px #BFBFBF solid;--padding-start: 10px;flex: 3;" [(ngModel)]="backCard.cvv" type="number" placeholder="CVV (Security code)">
    </ion-input>
  </ion-item>

  <ion-item lines='none'>
   <ion-label style="font-size: 0.8rem;color: #666666;">Set as default payment method</ion-label>
   <ion-toggle color="dark" [(ngModel)]="backCard.type"></ion-toggle>
  </ion-item>


  <ion-item lines='none' style="margin-top: 10px;">
      <ion-label>Billing Address</ion-label>
    </ion-item>
  
    <ion-item lines='none' style="margin-top: 5px;">
      <ion-input type="text" placeholder="First Name"  [(ngModel)]="backCard.cardUserlastName"></ion-input>
    </ion-item>
    <ion-item lines='none'>
      <ion-input type="text" placeholder="Last Name" [(ngModel)]="backCard.cardUserFirstName"></ion-input>
    </ion-item>
  
    <ion-item lines='none'>
      <ion-input type="text" placeholder="Street address: " [(ngModel)]="backCard.address"></ion-input>
    </ion-item>
  
  
    <ion-item lines='none'>
      <ion-input type='text' placeholder="City" [(ngModel)]="backCard.city"></ion-input>
      <ion-input [(ngModel)]="backCard.cardPhone" style="border-left: 1px #BFBFBF solid;--padding-start: 10px;" type="tel" placeholder="Phone Number">
      </ion-input>
    </ion-item>
  
  
    <ion-item lines='none'>
      <ion-input type='text' placeholder="Zip Code："  [(ngModel)]="backCard.addressDesc"></ion-input>
      <ion-input style="border-left: 1px #BFBFBF solid;--padding-start: 10px;" type="email" [(ngModel)]="backCard.cardEmail" placeholder="Email address：">
      </ion-input>
    </ion-item>
  






</ion-content>